<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】 设置背景颜色 
			        2.product_card 设置样式：内边距，边框设置颜色，加倒角
					  加阴影，所有内容--居中：text-align：center
					3.图片边框倒角，外边距？
					3.小米 su7  文字  外边距？
					5.￥279999.00文字大小，外边距？
					6.颜色，外边距？内边距？
			*/
		   *{margin: 0;}
		   #product_card{
			   margin: 10px 10px 10px 10px;
			   width: 263px;
			   height: 537px;
			   padding: 10px 10px 10px 10px;
			   background: #efece8;
			   border-radius: 5px;
			   margin: auto;
			   text-align: center;
		   }
		   img{
			   border-radius: 5px;
			   margin:0px;
		   }
		   h3{
			   margin: 20px;
		   }
		   p1{
			   font-size: 25px;
			   margin: 10px;
			   color: #d30000;
		   }
		   p{
			   font-size: 15px;
			   color: #a7a5a3;
			   margin: 15px;
			   padding: 10px;
		   }
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/058a98a985876bc41840adeccd3b406.jpg" alt="su7" width="260px" height="358px">
			<h3>小米su7</h3>
			<p1>￥279999.00</p1>
			<p>已有<span>10万+</span>人评价</p>
		</div>
	</body>
</html>